<template>
  <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
    <div class="mine-box rule-box" v-show="ruleShow" id="new-rule">
      <div class="user-box-title" :style="back">
        <adminuserinfo></adminuserinfo>

        <div class="title-box">
          <p>新建规则</p>
        </div>
      </div>
      <div class="newrule-list">
        <mu-list>
          <mu-list-item>
            <mu-list-item-title>
              <div class="rulename-div">
                <span class="fleft">名称</span>
                <input
                  type="text"
                  maxlength="15"
                  class="my-input fright"
                  placeholder="输入规则名称"
                  icon="comment"
                  v-model="code.name"
                />
                <div class="_clear"></div>
              </div>
            </mu-list-item-title>
          </mu-list-item>

          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title @click="showRule">
                规则类型
                <span size="25" class="fright iconfont icon-narrow"></span>
                <span class="fright">{{choose.rule}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>

          <mu-list-item v-show="iscard">
            <mu-list-item-content>
              <mu-list-item-title @click="showmoney" >
                卡类型
                <span size="25" class="fright iconfont icon-narrow"></span>
                <span class="fright">{{choose.money}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
      </div>
      <mu-button class="blur-btn btn fleft out-btn" @click="close" id="close">取消</mu-button>
      <mu-button class="blur-btn btn fright" @click="submit" id="submit">确定</mu-button>
      <van-popup v-model="addshow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="ruleList"
          @confirm="ruleChange"
          show-toolbar
          title="请选择规则类型"
          cancel-button-text=" "
        />
      </van-popup>

      <van-popup v-model="moneyshow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="moneyList"
          @confirm="moneyChange"
          show-toolbar
          title="请选择计费类型"
          cancel-button-text=" "
        />
      </van-popup>
    </div>
  </transition>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { Picker } from "vant";
import "vant/lib/picker/style/index";
import "vant/lib/popup/style/index";
import { Toast } from "vant";
import "vant/lib/toast/style/index";
Vue.use(Picker);
Vue.use(Popup);
export default {
  data() {
    return {
      addshow: false,
      iscard: false,
      moneyshow: false,
      code: {
        rule: "",
        money: "",
        name: ""
      },
      choose: {
        rule: "",
        state: "",
        money: ""
      },

      ruleShow: false,
      back: {
        background: "url(" + require("@/assets/image/minebackimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      moneyList: [],

      ruleList: []
    };
  },
  watch:{
    'choose.rule':function(v){
      if(v=='卡'){
        this.iscard=true;
      }else{
          this.iscard=false;
      }
    }
  },
  methods: {
    newruleShow() {
      this.ruleShow = true;
    },
    close() {
      this.ruleShow = false;
    },
    showRule() {
      this.addshow = true;
    },
    showState() {
      this.stateshow = true;
    },
    showmoney() {
      this.moneyshow = true;
    },

    moneyChange(v) {
      this.choose.money = v.text;
      this.code.money = v.code;
      this.moneyshow = false;
    },
    ruleChange(v) {
      this.choose.rule = v.text;
      this.code.rule = v.code;
      this.addshow = false;
    },
    submit() {
      if (this.code.name == "") {
        Toast("请输入规则名称");
        return;
      }
      if (this.code.rule == "") {
        Toast("请选择规则类型");
        return;
      }
      if (this.code.money == ""&&this.iscard) {
        Toast("请选择计费类型");
        return;
      }
      this.$api
        .addRule({
          changeName: this.code.name,
          chargeType: this.code.money,
          chargeTypeName: this.choose.money,
          ruleType: this.code.rule,
          ruleTypeName: this.choose.rule
        })
        .then(res => {
          if (res.data.message.code == 0) {
            Toast("添加规则成功");
            this.$parent.getList();
            this.ruleShow = false;
          } else {
            Toast("添加规则失败");
          }
        });
    }
  },
  mounted() {
    //计费类型
    this.$api.getCodesByParent(3).then(res => {
      let a = JSON.stringify(res.data.data).replace(/codeName/g, "text");
      let b = JSON.parse(a);
      this.moneyList = b;
    });
    // 规则类型
    this.$api.getCodesByParent(10).then(res => {
      let a = JSON.stringify(res.data.data).replace(/codeName/g, "text");
      let b = JSON.parse(a);
      this.ruleList = b;
    });
  }
};
</script>

<style>
</style>
